<template>
	<div>
		<div class="history-job-wrapper">
			<h3 class="history-job-title">{{ props.title }}</h3>
			<ul class="history-job-list">
				<li
					@click="to(item.id)"
					class="mb-5 cursor-pointer"
					v-for="item in props.itemList"
				>
					<a>
						<div class="history-job-top">
							<h3>{{ item.jobName }}</h3>
							<span class="job-salary">{{ item.salary }}</span>
						</div>
						<div class="history-job-bottom">
							<span class="company-name">{{ item.companyName }}</span>
							<span class="company-position">{{ item.companyPosition }}</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps<{
	title: any
	itemList: any
}>()

/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/info/${id}`)
}
</script>
<style scoped>
.history-job-wrapper {
	padding-top: 20px;
	width: 100%;
	border-radius: 12px;
	margin-bottom: 16px;

	.history-job-title {
		height: 46px;
		background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
		border-radius: 12px 12px 0 0;
		font-size: 16px;
		font-weight: 500;
		color: #222;
		line-height: 22px;
		padding: 12px 24px;
	}
}

.history-job-list {
	padding: 4px 8px;
	background: #fff;
}

a {
	width: 268px;
	height: 65px;
	padding: 12px 16px;
	display: block;
	border-radius: 8px;
	transition: all 0.2s linear;
	color: #414a60;
}

li:hover {
	background-color: #eef0f3;
}

.history-job-wrapper .history-job-list li .history-job-top {
	overflow: hidden;
	margin-bottom: 4px;

	h3 {
		float: left;
		max-width: 120px;
		font-weight: 500;
		color: #333;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: all 0.2s linear;
	}

	h3 {
		float: left;
		max-width: 120px;
		font-weight: 500;
		color: #333;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: all 0.2s linear;
	}

	.job-salary {
		float: right;
		color: #fe574a;
		line-height: 20px;
		font-weight: 500;
		white-space: nowrap;
	}
}

.history-job-wrapper .history-job-list li .history-job-bottom .company-name {
	float: left;
	max-width: 100px;
	font-size: 12px;
	color: #999;
	line-height: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.history-job-wrapper
	.history-job-list
	li
	.history-job-bottom
	.company-position {
	float: right;
	max-width: 130px;
	font-size: 12px;
	font-weight: 400;
	color: #999;
	line-height: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
